<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 计步器vue3.0 编写 </title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
<script>
     Vue.createApp({
        data() {
            return {counter: 1 }   //1 在deta()函数中 声明变量 
        },
        mounted() {                //在mounted中实现自增 
                                   //console.log('页面加载完成后-自动执行')
            setInterval(() => {
                this.counter += 1
                //this.$data.counter +=1 效果相同
            }, 1000)
        },
        template: '<div>{{counter}}</div>'   //在模板中使用变量 需要{{}} 
    }).mount("#app")
   
    /*
      面向数据编程 即数据更新 视图发生改变  从面向dom编程到面向数据编程了 
    
     */

</script>
</html>
